<template>
  <div class="header-title">系统名称</div>
  <div class="upload">
    <div class="form">
      <div class="label">系统名称:</div>
      <div class="input">
        <ElInput style="width: 400px" placeholder="请输入" v-model="sysName"/>
      </div>
    </div>
  </div>
  <el-button type="primary" @click="submit">应用</el-button>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { updateSysName, updateLogoList } from '@/api/system/globalSettings'
import { ElMessage } from 'element-plus'

onMounted(() => {
  updateLogoList().then((res) => {
    sysName.value = res.data.find(
      (i) => i.configKey === 'sys.index.name'
    ).configValue
  })
})

const fileList = ref([])

const sysName = ref('')

const submit = () => {
  const loading = ref(false)
  updateSysName({ sysName: sysName.value })
    .then(() => {
      ElMessage.success('应用成功')
    })
    .finally(() => {
      loading.value = false
    })
}

</script>

<style scoped lang="scss">
.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  padding-bottom: 30px;
}
.upload-tx {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 10px;
  span {
    color: #46a6ff;
  }
}
.upload {
  margin-bottom: 30px;
}
.form {
  display: flex;
  align-items: center;
  .label {
    margin-right: 10px;
  }
}
</style>
